<template>
  <div>
    <p class="con-title">
      <span>
        <img src="@/assets/img/control/content/Group769.png" />
      </span>
      <span>政务云</span>
    </p>
  </div>
  <div class="query">
    <el-form ref="queryParamsRef" inline :model="queryParams">
      <el-form-item prop="searchValue">
        <el-input
          v-model="queryParams.searchValue"
          placeholder="请输入关键字"
          clearable
        />
      </el-form-item>
      <el-form-item label="区域" prop="areaId">
        <el-select
          v-model="queryParams.areaId"
          style="width: 100%"
          placeholder="请选择区域"
        >
          <el-option v-for="(i, k) in areaList" :key="k" :label="i.name" :value="i.id" />
        </el-select>
      </el-form-item>
      <el-form-item prop="type">
        <el-radio-group v-model="queryParams.type">
          <el-radio-button v-for="(i, k) in typeList" :key="k" :label="i.value">
            {{ i.label }}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="querySearch">查询</el-button>
        <el-button type="primary" plain @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="price">
    <div class="price_item">
      <div class="item_label">财务统计：</div>
      <div class="item_value">{{ statistics || 0 }}元</div>
    </div>
  </div>
  <el-table :data="dataList" header-cell-class-name="title-style" border>
    <el-table-column prop="serverName" label="配置标题" width="180" align="center" />
    <el-table-column prop="orderAbstract" label="订单配置" align="center" />
    <el-table-column prop="periodType" label="计费模式" align="center">
      <template #default="scope">
        {{ cPeriodType(scope.row.periodType) }}
      </template>
    </el-table-column>
    <el-table-column prop="updatePrice" label="金额(元)" align="center" />
    <el-table-column prop="createTime" label="下单时间" align="center" />
  </el-table>
  <div class="page-footer">
    <el-pagination
      :total="total"
      v-model:current-page="queryParams.pageNum"
      v-model:page-size="queryParams.pageSize"
      layout="->,total, prev, pager, next"
      small
      @size-change="getList"
      @current-change="getList"
    />
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { getGovServiceList, govAreaList, getStatistics } from "@/api/control/myServer";

const dataList = ref<any>([]); // 政务云列表
const typeList = ref<any>([
  { value: null, label: "全部" },
  { value: "cpu", label: "CPU" },
  { value: "memory", label: "内存" },
  { value: "hardDisk", label: "硬盘" },
  { value: "defense", label: "防御" },
  { value: "bandwidth", label: "带宽" },
  { value: "ip", label: "IP" },
]);
const areaList = ref<any>([]); // 区域列表
const queryParams = ref<any>({
  searchValue: null,
  areaId: null,
  type: null,
  pageNum: 1,
  pageSize: 10,
});
const total = ref<number>(0); // 总条数
const statistics = ref<number>(0); // 统计

onMounted(() => {
  getAreaList();
  getList();
  getCount();
});

//获取表格数据
const getList = () => {
  getGovServiceList(queryParams.value).then((res: any) => {
    dataList.value = res.rows;
    total.value = res.total;
  });
};

// 查询区域列表
const getAreaList = () => {
  govAreaList({}).then((res: any) => {
    areaList.value = res.data;
  });
};

// 获取财务统计
const getCount = () => {
  getStatistics(queryParams.value).then((res: any) => {
    statistics.value = Math.round(res.data * 100) / 100;
  });
};

//搜索
const querySearch = () => {
  queryParams.value.pageNum = 1;
  getList();
  getCount();
};

//重置
const resetQuery = () => {
  queryParams.value.searchValue = null;
  queryParams.value.type = null;
  queryParams.value.areaId = null;
  queryParams.value.pageNum = 1;
  getList();
  getCount();
};

//转换计费模式的格式
const cPeriodType = (val: number) => {
  if (0 == val) {
    return "按次";
  } else if (1 == val) {
    return "按天";
  } else if (30 == val) {
    return "按月";
  } else if (365 == val) {
    return "按年";
  }
};
</script>
<style lang="less" scoped>
.con-title {
  width: 100%;
  height: 25px;
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  span:nth-child(1) {
    display: flex;
    align-items: center;

    img {
      width: 14px;
      height: 14px;
    }
  }
  span:nth-child(2) {
    display: flex;
    align-items: center;
    margin-left: 10px;
    font-size: 16px;
  }
}
.query {
  width: 100%;
  height: 50px;
  display: flex;
}

.price {
  width: 100%;
  height: 60px;
  display: flex;
  .price_item {
    flex: 1;
    display: flex;
    .item_label {
      width: 180px;
      background: #f6faff;
      border: 1px solid #ebeef5;
      font-weight: bold;
      color: #909090;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .item_value {
      flex: 3;
      border: 1px solid #ebeef5;
      display: flex;
      padding-left: 20px;
      align-items: center;
    }
  }
}
.page-footer {
  display: flex;
  justify-content: flex-end;
  margin: 20px 0;
}
</style>
<style>
.title-style {
  height: 60px;
  background-color: #f6faff !important;
}
</style>
